<template>
  <div class="flex">
    <template v-for="(item, i) in timeList" :key="i">
      <el-tooltip
        effect="dark"
        placement="top"
        class="box-item"
        trigger="hover"
        :ref="
          (el: any) => {
            if (timeIndex != i && el) el.hide()
          }
        "
        :content="item.tooltip"
      >
        <span
          v-if="i < 2"
          class="label"
          :class="{ active: timeIndex == i }"
          @click="handleIndex(i, item)"
        >
          {{ item.title }}
        </span>
      </el-tooltip>
      <!-- 自然月 -->
      <el-popover
        v-if="i == 2"
        :visible="monthVisible"
        placement="bottom"
        :width="360"
        trigger="click"
      >
        <div class="flex">
          <el-date-picker
            type="month"
            v-model="naturalMonth"
            placeholder="请选择月份"
            style="margin-right: 10px"
            :disabled-date="disableMonthFnc"
          />
          <el-button @click="handleCancel('month')">取消</el-button>
          <el-button type="primary" @click="handleMonth()">确定</el-button>
        </div>

        <template #reference>
          <div class="relative">
            <el-tooltip
              effect="dark"
              placement="top"
              class="box-item"
              trigger="hover"
              :ref="
                (el: any) => {
                  if (timeIndex != i && el) el.hide()
                }
              "
              :content="item.tooltip"
            >
              <span
                class="label"
                :class="{ active: timeIndex == i }"
                @click="handleIndex(i, item)"
              >
                {{ item.title }}
              </span>
            </el-tooltip>
          </div>
        </template>
      </el-popover>
      <!-- 自定义 -->
      <el-popover
        v-if="i == 3"
        :visible="customDateVisible"
        placement="bottom"
        :width="460"
        trigger="click"
      >
        <template #reference>
          <div class="relative">
            <el-tooltip
              effect="dark"
              placement="top"
              class="box-item"
              trigger="hover"
              :ref="
                (el: any) => {
                  if (timeIndex != i && el) el.hide()
                }
              "
              :content="item.tooltip"
            >
              <span
                v-if="i == 3"
                class="label"
                :class="{ active: timeIndex == i }"
                @click="handleIndex(i, item)"
              >
                {{ item.title }}
              </span>
            </el-tooltip>
          </div>
        </template>
        <div class="flex">
          <el-date-picker
            type="daterange"
            v-model="naturalCustomDate"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="margin-right: 10px"
            :disabled-date="disableMonthFnc"
          />
          <el-button @click="handleCancel('custom')">取消</el-button>
          <el-button type="primary" @click="handleCustomDate()">确定</el-button>
        </div>
      </el-popover>
    </template>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { constant } from 'lodash'
  import { GetMonthLength } from '~/src/utils/utils'

  /**
   * @var
   */
  const timeList = ref<any>([
    { title: '近7天', dataType: 'week', tooltip: '' },
    { title: '近15天', dataType: '15days', tooltip: '' },
    { title: '自然月', dataType: 'month', tooltip: '未选择时间' },
    { title: '自定义', dataType: 'custom', tooltip: '未选择时间' },
  ])

  const timeIndex = ref(0)
  const dataType = ref('week')

  // 前一天 -前七天
  const dayBefore = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
  const sevenDayBefore = dayjs().subtract(6, 'day').format('YYYY-MM-DD')
  const DayBefore15 = dayjs().subtract(14, 'day').format('YYYY-MM-DD')

  const nowTimes = ref<any>(dayBefore)
  timeList.value[0].tooltip = sevenDayBefore + ' / ' + dayBefore
  timeList.value[1].tooltip = DayBefore15 + ' / ' + dayBefore

  // 自然月的值
  const naturalMonth = ref<any>(null)
  const naturalCustomDate = ref<any>(null)
  const monthVisible = ref(false)
  const customDateVisible = ref(false)

  const disableMonthFnc = (time: Record<string, any>): boolean => {
    if (time.getTime() > new Date().getTime()) {
      return true
    } else {
      return false
    }
  }

  /**
   * @method
   */

  const emit = defineEmits(['selectDate'])

  const handleIndex = (i: number, row: any) => {
    monthVisible.value = false
    customDateVisible.value = false
    timeIndex.value = i
    dataType.value = row.dataType

    if (i < 2) {
      nowTimes.value = setTimesInterval(i)
      emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
    }

    if (i == 2) {
      monthVisible.value = true
    }
    if (i == 3) {
      customDateVisible.value = true
    }
  }

  // 筛选月份
  const handleMonth = () => {
    monthVisible.value = false
    /* 計算每月幾天 */
    const monthLength = GetMonthLength(
      dayjs(naturalMonth.value).format('YYYY-MM')
    )
    timeList.value[2].tooltip =
      dayjs(naturalMonth.value).format('YYYY-MM-01') +
      ' / ' +
      dayjs(naturalMonth.value).format(`YYYY-MM/${monthLength}`)

    nowTimes.value = dayjs(naturalMonth.value).format('YYYY-MM')

    emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
  }
  // 自定义时间
  const handleCustomDate = () => {
    customDateVisible.value = false

    nowTimes.value =
      dayjs(naturalCustomDate.value[0]).format('YYYY-MM-DD') +
      ' / ' +
      dayjs(naturalCustomDate.value[1]).format('YYYY-MM-DD')

    timeList.value[3].tooltip = nowTimes.value

    emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
  }

  const setTimesInterval = (i = 0) => {
    if (i == 0) return dayBefore
    if (i == 1) return sevenDayBefore + '/' + dayBefore
  }

  // 取消
  const handleCancel = (type = 'month') => {
    if (type == 'month') {
      monthVisible.value = false
      naturalMonth.value = ''
    }
    if (type == 'custom') {
      customDateVisible.value = false
      naturalCustomDate.value = ''
    }
  }

  /**
   * @实例
   */
  defineExpose({
    nowTimes,
    timeIndex,
  })
</script>

<style lang="scss" scoped>
  .label {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    font-family: PingFangSC-Regular;
    font-weight: 300;
    font-size: 12px;
    color: #595959;
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;
    cursor: pointer;

    &:last-child {
      border-radius: 0 4px 4px 0;
    }

    &.active {
      background: #1456f0 !important;
      color: #ffffff !important;
      border-radius: 4px;
      transition: all 0.5s ease-in-out;
    }
  }
</style>
